<template>
  <a-card
    :bordered="false"
    :bodyStyle="{ padding: '16px 0', height: '100%' }"
    :style="{ height: '100%' }"
  >
    <div class="user-settings-info-main" >
      <div class="user-settings-info-left">
        <a-menu
          mode="inline"
          type="inner"
          :style="{ border: '0', width: '222px' }"
          :selectedKeys="selectedKeys"
        >
          <a-menu-item key="/user/settings/basic">
            <router-link :to="{ name: 'basicSetting' }">
              {{ $t("menu.user.settings.basicSetting") }}
            </router-link>
          </a-menu-item>
          <a-menu-item key="/user/settings/security">
            <router-link :to="{ name: 'securitySetting' }">
              {{ $t("menu.user.settings.securitySetting") }}
            </router-link>
          </a-menu-item>
          <a-menu-item key="/user/settings/notification">
            <router-link :to="{ name: 'notification' }">
              {{ $t("menu.user.settings.notification") }}
            </router-link>
          </a-menu-item>
        </a-menu>
      </div>

      <div class="user-settings-info-right">
        <div class="user-settings-info-title">
          <span>{{ $t($route.meta.title) }}</span>
        </div>
        <route-view />
      </div>
    </div>
  </a-card>
</template>

<script>
import { RouteView } from '@/layouts'

export default {
  name: 'Settings',
  components: {
    RouteView
  },
  data () {
    return {
      selectedKeys: []
    }
  },

  mounted () {
    this.updateMenu()
  },
  watch: {
    $route (val) {
      this.updateMenu()
    }
  },
  methods: {

    updateMenu () {
      const routes = this.$route.matched.concat()
      this.selectedKeys = [routes.pop().path]
    }
  }
}
</script>

<style lang="less" scoped>
.user-settings-info-main {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: auto;

  &.mobile {
    display: block;

    .user-settings-info-left {
      border-right: unset;
      border-bottom: 1px solid #e8e8e8;
      width: 100%;
      height: 50px;
      overflow-x: auto;
      overflow-y: scroll;
    }
    .user-settings-info-right {
      padding: 20px 40px;
    }
  }

  .user-settings-info-left {
    border-right: 1px solid #e8e8e8;
    width: 224px;
  }

  .user-settings-info-right {
    flex: 1 1;
    padding: 8px 40px;

    .user-settings-info-title {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      margin-bottom: 12px;
    }

  }
}
</style>
